<template>
	<view class="order_management">
		<u-sticky>
			<view class="tab">
				<view :class="['tabitem', { active: tabIndex == 1 }]" @click.stop="toggle(1)">商品订单</view>
				<view :class="['tabitem', { active: tabIndex == 2 }]" @click.stop="toggle(2)">摄影订单</view>
			</view>
			<view class="header_share w750 flex">
				<view class="search-warp">
					<input class="uni_ipt" type="text" v-model="keyword" placeholder-style="color: #CCC;" placeholder-class="s24 f500 family" placeholder="店铺名称/商品名称" />
					<image class="search_img" src="../static/search.png" f00></image>
					<view @click.stop="search" class="search_btn s26 f500 family txtali">搜索</view>
				</view>
				<view class="filter" @click.stop="expandAndCollapse">
					<image class="rqsxicon" src="/static/rqsx.svg"></image>
					<text class="title">筛选</text>
					<image :class="['arrow', { showv: showv }]" src="/static/down.svg"></image>
				</view>
			</view>
			<view class="filter-box" v-show="showv">
				<view class="filter-container">
					<view class="fillter-warp">
						<view class="title">按时间筛选订单</view>
						<view class="date_box">
							<uni-datetime-picker ref="time1" type="date" :value="startDate" start="2021-3-20" end="2111-6-30" @change="change" />
							<view class="divider"></view>
							<uni-datetime-picker ref="time2" type="date" :value="endDate" start="2021-3-20" end="2111-6-30" @change="change1" />
						</view>
					</view>
					<view class="btn-group">
						<view class="btn reset" @click.stop="reset">重置</view>
						<view class="btn confirm" @click.stop="screen">确定</view>
					</view>
				</view>
			</view>
			<view class="list_box">
				<scroll-view class="scroll-view_H flexjus" scroll-x="true" :scroll-left="listIndex >= 5 ? '400' : '0'">
					<view :class="[listIndex == index ? 'listTxtActive' : 'listTxt']" v-for="(item, index) in list" :key="index" @click.stop="onActive(index, item.typeTxt)">
						{{ item.name }}
					</view>
				</scroll-view>
			</view>
		</u-sticky>
		<view class="orderInformation">
			<!-- 订单列表 -->
			<block v-for="(item, index) in listData" :key="index">
				<template v-if="item.order_type == 'goods'">
					<view class="goods_list_box" @click="onOrderDetail(item, index)">
						<view class="goods_list_head flexjus">
							<view class="head_left flex">
								<image class="shopIcon" :src="item.shop.avatar_url" />
								<view class="shopname">{{ item.shop.shopname }}</view>
							</view>
							<view class="c_left_box s24 family f500 txtali">订单日期：{{ item.createtime_text }}</view>
						</view>
						<view class="goods_list_head flexjus" style="padding: 24rpx 0px">
							<view class="head_left s24 familytow opkijs">
								{{ item.send_type == 0 ? '物流发货' : item.send_type == 1 ? '商家配送' : item.send_type == 2 ? '到店自提' : item.send_type == 3 ? '礼服预约' : '' }}-
								{{ item.is_prepay == 1 ? '定金支付' : item.is_prepay == 0 ? '全款支付' : '' }}
							</view>
							<template v-if="item.is_prepay == 0">
								<view class="head_right flex" v-if="item.state == 1">
									<view class="c_left_box s22 family f500 txtali">等待支付</view>
									<view class="c_right_box s22 family f500 txtali">
										<!-- 1小时59分 -->
										<djs :index="index" :times="item.endtime" @del="delOrder"></djs>
									</view>
								</view>
							</template>
							<template v-if="item.is_prepay == 1">
								<template v-if="item.refundstatus == 0">
									<view class="head_right flex" v-if="item.state == 1 && !(item.paymenttime > 0)">
										<view class="c_left_box s22 family f500 txtali">等待支付</view>
										<view class="c_right_box s22 family f500 txtali">
											<!-- 1小时59分 -->
											<djs :index="index" :times="item.endtime" @del="delOrder"></djs>
										</view>
									</view>

									<view class="completeAfter" v-if="item.state == 1 && item.paymenttime > 0">
										<!-- 商所有的定金支付订单，在支付定金后，把状态 “待付尾款”全部“余款未结" -->
										<!-- 待付尾款 -->
										余款未结
									</view>
								</template>
								<template v-else>
									<view class="completeAfter" v-if="item.refundstatus == 1">申请中</view>
									<view class="completeBefore" v-if="item.refundstatus == 2">取消订单已通过</view>
									<view class="completeBefore" v-if="item.refundstatus == 3">取消订单未通过</view>
								</template>
							</template>
							<!-- 状态组件 -->
							<template
								v-if="
									!((item.is_prepay == 0 && item.state == 1) || (item.is_prepay == 1 && item.state == 1 && !(item.paymenttime > 0)) || (item.state == 1 && item.paymenttime > 0))
								"
							>
								<state :item="item"></state>
							</template>
						</view>
						<view class="goods_detail_box flex" v-for="(items, indexs) in item.goods" :key="indexs">
							<view class="goods_img_box">
								<image class="w100 h100" :src="item.sku.thumbnail ? item.sku.thumbnail : items.image_src"></image>
							</view>
							<view class="goods_name_box s26 f500 family">
								{{ spceType(items.title, item.sku.difference, item.sku.spec_type) }}
							</view>
							<view class="goods_price_box">
								<view class="price_txt s24 family f500">
									<text style="font-size: 12px">￥</text>
									{{ item.order_price }}
								</view>
								<view class="num_txt s22 family f500 txtali">共{{ items.number }}件</view>
							</view>
						</view>
						<!-- 操作订单组件 -->
						<Buttonss @refresh="refresh" :item="item"></Buttonss>

						<!-- 支付取消订单 -->
						<view v-if="item.refundstatus == 3" style="padding: 24rpx 0rpx; border-bottom: 2rpx solid #f4f4f4; font-size: 28rpx">拒绝原因：{{ item.content }}</view>
						<view v-if="item.refundstatus == 2" style="font-size: 20rpx; color: #f00; margin-top: 24rpx">
							备注：“您支付的退款金额将在商家确认退款之后的48小时之内，退回到原支付账户！请注意查收！未到账可及时联系商家，由商家联系平台进行处理。”
						</view>
						<view v-if="item.refundstatus == 3" style="font-size: 20rpx; color: #f00; margin-top: 24rpx">
							备注：“商家不同意取消订单，想继续取消订单，请联系商家继续沟通”。不能与商家解决的问题可以在“我的投诉”中向平台管理这进行投诉。
						</view>
						<!-- 申请退货订单 -->
						<template v-if="item.refund.opre_type == 0">
							<view v-if="item.refund.state == 2" style="padding: 24rpx 0rpx; border-bottom: 2rpx solid #f4f4f4; font-size: 28rpx">退货提醒：{{ item.refund.refuse_content }}</view>
							<view v-if="item.refund.state == 2" style="font-size: 20rpx; color: #f00; margin-top: 24rpx">
								备注：“商家不同意申请退货，想继续申请退货，请联系商家继续沟通”。不能与商家解决的问题可以在“我的投诉”中向平台管理这进行投诉。
							</view>
							<view v-if="item.refund.state == 1 && item.refund.refund_state == 0" style="font-size: 20rpx; color: #f00; margin-top: 24rpx">
								备注：“您支付的退款金额将在商家收到退回商品之后的48小时之内，退回到原支付账户！请注意查收！未到账可及时联系商家，由商家联系平台进行处理。”。
							</view>
						</template>
						<!-- 申请换货订单 -->
						<template v-if="item.refund.opre_type == 1">
							<view v-if="item.refund.state == 2" style="padding: 24rpx 0rpx; border-bottom: 2rpx solid #f4f4f4; font-size: 28rpx">换货提醒：{{ item.refund.refuse_content }}</view>
							<view v-if="item.refund.state == 2" style="font-size: 20rpx; color: #f00; margin-top: 24rpx">
								备注：“商家不同意申请换货，想继续申请换货，请联系商家继续沟通”。不能与商家解决的问题可以在“我的投诉”中向平台管理这进行投诉。
							</view>
							<view v-if="item.refund.state == 1 && item.refund.refund_state == 0" style="font-size: 20rpx; color: #f00; margin-top: 24rpx">
								备注：“您支付的退款金额将在商家收到退回商品之后的48小时之内，退回到原支付账户！请注意查收！未到账可及时联系商家，由商家联系平台进行处理。”。
							</view>
						</template>
						<!-- 申请维修订单 -->
						<template v-if="item.refund.opre_type == 2">
							<view v-if="item.refund.state == 2" style="padding: 24rpx 0rpx; border-bottom: 2rpx solid #f4f4f4; font-size: 28rpx">换货提醒：{{ item.refund.refuse_content }}</view>
							<view v-if="item.refund.state == 2" style="font-size: 20rpx; color: #f00; margin-top: 24rpx">
								备注：“商家不同意免费维修，想继续申请免费维修，请联系商家继续沟通”。不能与商家解决的问题可以在“我的投诉”中向平台管理这进行投诉。
							</view>
							<!-- <view v-if="item.refund.state==1&&item.refund.refund_state==0" style="font-size: 20rpx;color: #f00;margin-top: 24rpx;">
								备注：“您支付的退款金额将在商家收到退回商品之后的48小时之内，退回到原支付账户！请注意查收！未到账可及时联系商家，由商家联系平台进行处理。”。
							</view>		 -->
						</template>
						<template v-if="item.state < 7 && item.state > 1 && item.wedding">
							<view
								v-if="item.wedding.u_type == 3 && (item.wedding.status == 6 || item.wedding.status == 0) && item.paymenttime > 0"
								style="display: flex; align-items: center; justify-content: space-between; background: #faf1e7; padding: 15rpx 32rpx"
							>
								<view style="font-size: 26rpx; color: #844902">
									<text v-if="item.is_prepay == 1">您已付清余款，商家给您已备好商品，请确认</text>
									<text v-else>商家请您再次确认订单</text>
								</view>
								<view style="display: flex; align-items: center">
									<view class="look" @click.stop="lookOrder(item)">查看</view>
								</view>
							</view>
						</template>
					</view>
				</template>
				<template v-else-if="item.w_type == 1">
					<view class="goods_list_box" @click="goDetails(item)">
						<view class="goods_list_head flexjus">
							<view class="head_left flex">
								<image class="shopIcon" :src="item.shop.avatar_url" />
								<view class="shopname">{{ item.shop.shopname }}</view>
							</view>
							<view class="c_left_box s24 family f500 txtali">订单日期：{{ item.createtime_text }}</view>
						</view>
						<view class="goods_list_head flexjus" style="padding: 24rpx 0px">
							<view class="head_left s24 familytow">{{ item.dress_wedding.type ? '新娘妆预约' : '礼服预约' }}</view>
							<view v-if="item.dress_wedding.status == 0" class="completeAfter">已预约</view>
							<view v-if="item.dress_wedding.status == 5" class="completeBefore">已取消</view>
							<view v-if="item.dress_wedding.status == 6" class="completeBefore">未成交</view>
							<view v-if="item.dress_wedding.status == 4" class="completeBefore">已成交</view>
						</view>
						<view class="flex align-center">
							<view style="font-size: 0; margin-right: 26rpx">
								<image style="width: 116rpx; height: 116rpx; border-radius: 8rpx" v-if="item.workers" :src="item.workers.image_src" f00></image>
								<image style="width: 116rpx; height: 116rpx; border-radius: 8rpx" v-else :src="item.dress.image_src" f00></image>
							</view>

							<view class="flex-1 text-overflow2 s26" style="color: #333">
								{{ item.workers ? item.workers.name : item.dress.title }}
							</view>
							<view class="flex justify-center align-end flex-column" style="margin-left: 30rpx" v-if="item.dress">
								<view style="font-size: 24rpx; color: #000; font-weight: 700" v-if="!item.dress_wedding.type">￥{{ item.dress.price }}</view>
								<view style="font-size: 22rpx; color: #666; margin-top: 10rpx">共1件</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="goods_list_box" @click="goDetails(item)">
						<view class="goods_list_head flexjus">
							<view class="head_left flex">
								<image class="shopIcon" :src="item.shop.avatar_url" />
								<view class="shopname">{{ item.shop.shopname }}</view>
							</view>
							<view class="c_left_box s24 family f500 txtali">订单日期：{{ item.createtime_text }}</view>
						</view>
						<view class="goods_list_head flexjus" style="padding: 24rpx 0px">
							<view class="head_left s24 familytow">
								{{ item.is_prepay == 1 ? '定金支付' : item.is_prepay == 0 ? '全款支付' : '' }}
							</view>
							<!-- 正常状态 -->
							<template v-if="item.refundstatus == 0 && item.refund.length == 0">
								<view class="completeAfter" v-if="item.state == 7">已取消</view>
								<template v-if="item.is_prepay == 0">
									<view class="head_right flex" v-if="item.state == 1">
										<view class="c_left_box s22 family f500 txtali">等待支付</view>
										<view class="c_right_box s22 family f500 txtali">
											<!-- 1小时59分 -->
											<djs :index="index" :times="item.endtime" @del="delOrder"></djs>
										</view>
									</view>
								</template>
								<template v-if="item.is_prepay == 1">
									<template v-if="item.refundstatus == 0">
										<view class="head_right flex" v-if="item.state == 1 && !(item.paymenttime > 0)">
											<view class="c_left_box s22 family f500 txtali">等待支付</view>
											<view class="c_right_box s22 family f500 txtali">
												<!-- 1小时59分 -->
												<djs :index="index" :times="item.endtime" @del="delOrder"></djs>
											</view>
										</view>

										<view class="completeAfter" v-if="item.state == 1 && item.paymenttime > 0">
											<!-- 商所有的定金支付订单，在支付定金后，把状态 “待付尾款”全部“余款未结" -->
											余款未结
										</view>
									</template>
								</template>
								<view v-if="item.state == 2 && item.wedding.status == 6 && item.paymenttime > 0 && item.wedding.u_type != 1" class="completeAfter">待排期</view>
								<view
									v-if="
										item.state == 2 &&
										((item.wedding.status == 6 && item.wedding.u_type == 1) ||
											(item.wedding.status == 7 && item.wedding.u_type == 0) ||
											(item.wedding.status == 1 && item.wedding.u_type == 3))
									"
									class="completeAfter"
								>
									已排期、待拍摄
								</view>
								<view
									v-if="
										((item.wedding.status == 1 && (item.wedding.u_type == 1 || item.wedding.u_type == 0)) || (item.wedding.status == 2 && item.wedding.u_type == 3)) &&
										item.state !== 7
									"
									class="completeAfter"
								>
									已拍摄、待选样
								</view>
								<view
									v-if="(item.wedding.status == 2 && (item.wedding.u_type == 1 || item.wedding.u_type == 0)) || (item.wedding.status == 3 && item.wedding.u_type == 3)"
									class="completeAfter"
								>
									已选样、待看板
								</view>
								<view
									v-if="(item.wedding.status == 3 && (item.wedding.u_type == 1 || item.wedding.u_type == 0)) || (item.wedding.status == 4 && item.wedding.u_type == 3)"
									class="completeAfter"
								>
									{{ item.wedding.t_status == 0 ? '已看板' : item.wedding.t_status == 1 ? '不看板' : '' }}、待取件
								</view>
								<view v-if="item.wedding.u_type == 1 && item.wedding.status == 4" class="completeBefore">已取件、已结束</view>
							</template>
							<!-- 支付取消 -->
							<template v-else>
								<view class="completeAfter" v-if="item.refundstatus == 0">已取消</view>
								<view class="completeAfter" v-if="item.refundstatus == 1">申请中</view>
								<view class="completeBefore" v-if="item.refundstatus == 2">取消订单已通过</view>
								<view class="completeBefore" v-if="item.refundstatus == 3">取消订单未通过</view>
							</template>
						</view>
						<view class="goods_detail_box flex" v-for="(items, indexs) in item.goods" :key="indexs">
							<view class="goods_img_box">
								<image style="width: 116rpx; height: 116rpx; border-radius: 8rpx" :src="items.image_src"></image>
							</view>
							<view class="goods_name_box s26 f500 family">
								{{ items.title }}
							</view>
							<view class="goods_price_box">
								<view class="price_txt s24 family f500">
									<text style="font-size: 12px">￥</text>
									{{ item.order_price }}
								</view>
								<view class="num_txt s22 family f500 txtali">共{{ items.number }}件</view>
							</view>
						</view>
						<!-- 操作 -->
						<view class="bottom_btn">
							<view @click.stop="reGoDetails(item)" v-if="item.state == 7" class="b">重新购买</view>
							<template v-if="item.is_prepay == 0">
								<view @click.stop="cancel(item)" v-if="item.state < 3 && item.wedding.u_type != 3 && item.wedding.u_type != 1" class="b">取消订单</view>
								<view v-if="item.state == 1" :class="['r', { disabled: item.can_pay == 0 || item.pay_action == 0 }]" @click.stop="payment(item)">去支付</view>
								<view
									v-if="item.state > 2 && item.weddind.status < 2"
									@click="shenqingtuikuan(item)"
									style="padding: 14rpx 34rpx; font-size: 22rpx; color: #333; border: 1rpx solid #ccc; border-radius: 30rpx"
								>
									申请退款
								</view>
							</template>
							<template v-if="item.is_prepay == 1">
								<view v-if="item.change !== null || item.change.statu == 0"></view>
								<view @click.stop="cancel(item)" v-if="item.state > 2 && item.weddind.status < 2" class="b">申请退款</view>
								<view @click.stop="cancel(item)" v-if="item.state < 2" class="b">取消订单</view>
								<view v-if="item.state == 1 && !(item.paymenttime > 0)" :class="['r', { disabled: item.can_pay == 0 || !item.pay_action }]" @click.stop="payment(item)">
									支付定金
								</view>
							</template>
						</view>
						<!-- 商家点击排期确认 -->
						<template v-if="item.wedding">
							<view
								class="flexjus align-center"
								v-if="item.wedding.u_type == 3 && item.wedding.status == 6 && item.paymenttime > 0"
								style="background: #faf1e7; padding: 15rpx 32rpx; margin-top: 20rpx"
							>
								<view style="font-size: 26rpx; color: #844902">
									<text v-if="item.is_prepay == 1">您已付清余款，商家给您已安排拍摄时间，请确认</text>
									<view v-else>商家给您已安排拍摄时间，请确认</view>
								</view>
								<view style="display: flex; align-items: center">
									<view class="look" @click.stop="lookhs(item)">查看</view>
								</view>
							</view>
						</template>
						<!-- 客户审核操作 -->
						<template v-if="item.change == null || item.change.status != 0">
							<view
								class="flexjus align-center"
								v-if="item.wedding.u_type == 3 && item.wedding.status != 0 && item.wedding.status != 6 && item.refundstatus == 0"
								style="background: linear-gradient(90deg, #fff9f2 -1.47%, #faf1e6 48.21%, #ffffff 100%); padding: 15rpx 32rpx"
							>
								<view style="font-size: 26rpx; color: #844902">
									{{
										item.wedding.status == 1
											? '拍摄已完成，请确认'
											: item.wedding.status == 2
											? '选样已完成，请确认'
											: item.wedding.status == 3 && item.wedding.t_status == 1
											? '取消看板环节，请确认'
											: item.wedding.status == 3 && item.wedding.t_status == 0
											? '看板已完成，请确认'
											: item.wedding.status == 4
											? '取件已完成，请确认'
											: ''
									}}
								</view>
								<view style="display: flex; align-items: center">
									<view class="refuse" @click.stop="handle(2, item)">拒绝</view>
									<view class="look" @click.stop="handle(1, item)">同意</view>
								</view>
							</view>
						</template>
						<template v-else>
							<view
								class="flexjus align-center"
								v-if="item.change && item.change.status == 0 && item.refundstatus == 0"
								style="background: linear-gradient(90deg, #fff9f2 -1.47%, #faf1e6 48.21%, #fff 100%); padding: 15rpx 32rpx"
							>
								<view @click.stop="seetiaohuan(item.change)" style="font-size: 26rpx; color: #844902">商家申请更换预约老师/档期></view>
								<view style="display: flex; align-items: center">
									<view class="refuse" @click="handle(4, item)">拒绝</view>
									<view class="look" @click="handle(3, item)">同意</view>
								</view>
							</view>
						</template>
						<!-- 支付取消订单 -->
						<view v-if="item.refundstatus == 3" style="padding: 24rpx 32rpx; border-bottom: 2rpx solid #f4f4f4; font-size: 28rpx">拒绝原因：{{ item.content }}</view>
						<view v-if="item.refundstatus == 2" style="font-size: 20rpx; color: #f00; margin-top: 24rpx; padding: 0 32rpx">
							备注：“您支付的退款金额将在商家确认退款之后的48小时之内，退回到原支付账户！请注意查收！未到账可及时联系商家，由商家联系平台进行处理。”
						</view>
						<view v-if="item.refundstatus == 3" style="font-size: 20rpx; color: #f00; margin-top: 24rpx; padding: 0 32rpx">
							备注：“商家不同意取消订单，想继续取消订单，请联系商家继续沟通”。不能与商家解决的问题可以在“我的投诉”中向平台管理这进行投诉。
						</view>
					</view>
				</template>
			</block>

			<view v-if="listData.length == 0">
				<no-status :type="listIndex" :text="listTxt"></no-status>
			</view>
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup_box">
					<view class="title_txt familytow s32 fblod txtali">填写物流信息</view>
					<view class="ipt_box flex">
						<view class="left_txt_title s30 family f500">快递名称</view>
						<input class="ipt_wuliu_box" type="text" v-model="kdmc" placeholder="请输入快递名称" />
					</view>
					<view class="ipt_box flex" style="margin-top: 30upx">
						<view class="left_txt_title s30 family f500">物流信息</view>
						<input class="ipt_wuliu_box" type="text" v-model="wlxx" placeholder="请输入物流信息" />
					</view>
					<view class="submit_btn s32 familytow fblod txtali" @click="submitWl">提交</view>
				</view>
			</uni-popup>
			<!-- 确认操作弹窗 -->
			<uni-popup ref="confirm" type="center">
				<view class="tips2">
					<view class="title">是否{{ type == 1 || type == 3 ? '同意' : '拒绝' }}此次提交状态？</view>
					<view class="btn-group">
						<view class="btn cancel" @click="cencle">取消</view>
						<view class="btn confirm" @click="confirmHandle">确定</view>
					</view>
				</view>
			</uni-popup>
			<!-- 确定订单提醒按钮 -->
			<uni-popup ref="orderToast" type="center">
				<view class="tips2">
					<view class="title">提示</view>
					<view class="content">
						<text v-if="selectItem.is_prepay == 1">
							<text v-if="selectItem.send_type == 2" style="line-height: 54rpx; color: #666">
								确认订单后，将为您保留活动或商品份额，并请您及时到店领取，同时不能再申请‘退单退款’，在‘确认收货’后，可申请‘退货/售后’；（需您购买的产品支持7天无理由退货）
							</text>
							<text v-else style="line-height: 54rpx; color: #666">
								确认订单后，将为您保留活动或商品份额，并及时发货，同时不能再申请‘退单退款’，在‘确认收货’后，可申请‘退货/售后’；（需您购买的产品支持7天无理由退货）
							</text>
						</text>
						<text v-else>
							<text v-if="selectItem.send_type == 2" style="line-height: 54rpx; color: #666">
								确认订单后，将为您保留活动或商品份额，并请您及时到店领取，同时不能再申请‘退单退款’服务，在‘确认收货’后，可申请‘退货/售后’；（需您购买的产品支持7天无理由退货）
							</text>
							<text v-else style="line-height: 54rpx; color: #666">
								确认订单后，将为您保留活动或商品份额，并及时发货，同时不能再申请‘退单退款’服务，在‘确认收货’后，可申请‘退货/售后’；（需您购买的产品支持7天无理由退货）
							</text>
						</text>
					</view>
					<view class="btn-group">
						<view class="btn cancel" @click="refuseOrder">拒绝</view>
						<view class="btn confirm" @click="okOrder">同意</view>
					</view>
				</view>
			</uni-popup>
			<!-- 婚纱提示 -->
			<uni-popup ref="hsToast" type="center">
				<view class="tips2">
					<view class="title">提示</view>
					<view class="content">商家已给您安排合理的拍摄时间，请您及时确认，确认后将为您保留拍摄档期，同时不能再申请‘退单退款’，在‘选样完成’前，如不满意，可申请‘退货/售后</view>
					<view class="btn-group">
						<view class="btn cancel" @click="handle(2)">拒绝</view>
						<view class="btn confirm" @click="handle(1)">同意</view>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="tips" type="center">
				<view class="tips2">
					<view class="title">提示</view>
					<view class="content">{{ tipsContent }}</view>
					<view class="btn-group">
						<view class="btn cancel" @click="refuseOrder">拒绝</view>
						<view class="btn confirm" @click="okOrder(1)">同意</view>
					</view>
				</view>
			</uni-popup>
			<!-- 拒绝理由弹窗 -->
			<uni-popup ref="reason" type="bottom" background-color="#fff" borderRadius="32rpx 32rpx 0px 0px">
				<view class="jjpopup">
					<view style="display: flex; align-items: center; justify-content: space-between">
						<view style="width: 100%; font-size: 32rpx; color: #111; text-align: center">填写拒绝理由</view>
						<uni-icons type="clear" size="30" color="#E9DDCF" @click="$refs.reason.close()"></uni-icons>
					</view>
					<view style="display: flex; justify-content: center">
						<view
							class=""
							style="
								flex: 1;
								height: 322rpx;
								margin-top: 52rpx;
								background: transparent;
								border-radius: 20rpx;
								position: relative;
								padding: 24rpx 32rpx;
								border: 2rpx solid #cdcdcd;
								box-sizing: border-box;
							"
						>
							<textarea placeholder="请填写拒绝理由" maxlength="300" style="width: 100%; height: 100%" v-model="reason" name="" id=""></textarea>
							<view style="font-size: 24rpx; color: #999999; position: absolute; right: 24rpx; bottom: 32rpx">{{ reason.length }}/300</view>
						</view>
					</view>
					<view class="rejectBtnBlock">
						<button @click="confirmHandle">提交</button>
					</view>
				</view>
			</uni-popup>
			<!-- 调换信息弹窗 -->
			<uni-popup ref="tiaohuanxinxi" type="center">
				<view class="tips2">
					<view style="flex: 1">
						<view class="title">摄影师</view>
						<view style="display: flex; align-items: center; margin-top: 28rpx">
							<view v-if="tiaohuanxinxishuju.before_s_worker.name" style="flex: 1; text-align: center; font-size: 26rpx; font-weight: 700; color: #333333">
								{{ tiaohuanxinxishuju.before_s_worker.name }}
							</view>
							<view style="flex: 1; text-align: center; font-size: 26rpx; font-weight: 700; color: #333333" v-else>未指定</view>
							<view style="font-size: 26rpx; color: #666">更换为</view>
							<view style="flex: 1; text-align: center; font-size: 26rpx; font-weight: 700; color: #844902">
								{{ tiaohuanxinxishuju.now_s_worker.name }}
							</view>
						</view>
					</view>
					<view style="flex: 1; margin-top: 20rpx">
						<view class="title">化妆师</view>
						<view style="display: flex; align-items: center; margin-top: 28rpx">
							<view style="flex: 1; text-align: center; font-size: 26rpx; font-weight: 700; color: #333333" v-if="tiaohuanxinxishuju.before_z_worker.name">
								{{ tiaohuanxinxishuju.before_z_worker.name }}
							</view>
							<view style="flex: 1; text-align: center; font-size: 26rpx; font-weight: 700; color: #333333" v-else>未指定</view>
							<view style="font-size: 26rpx; color: #666">更换为</view>
							<view style="flex: 1; text-align: center; font-size: 26rpx; font-weight: 700; color: #844902">
								{{ tiaohuanxinxishuju.now_z_worker.name }}
							</view>
						</view>
					</view>
					<view style="flex: 1; margin-top: 20rpx">
						<view class="title">档期</view>
						<view style="display: flex; align-items: center; margin-top: 28rpx">
							<view style="flex: 1; text-align: center; font-size: 26rpx; font-weight: 700; color: #333333">
								{{ tiaohuanxinxishuju.b_time }}
							</view>
							<view style="font-size: 26rpx; color: #666">更换为</view>
							<view style="flex: 1; text-align: center; font-size: 26rpx; font-weight: 700; color: #844902">
								{{ tiaohuanxinxishuju.n_time }}
							</view>
						</view>
					</view>
					<view class="btn-group">
						<view class="btn confirm" style="width: 100%" @click="guanbitiaohuanxinxi">知道了</view>
					</view>
				</view>
			</uni-popup>
			<!-- 取消订单弹窗 -->
			<uni-popup ref="cancelOrder" type="center">
				<view class="tips2">
					<view class="title">提示</view>
					<view class="content">确认取消订单？</view>
					<view class="btn-group">
						<view class="btn cancel" @click="cancelOrder(0)">取消</view>
						<view class="btn confirm" @click="cancelOrder(1)">确定</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import noStatus from '@/components/noStatus.vue';
import djs from './daojishi.vue';
import state from './state.vue';
import Buttonss from './button.vue';
export default {
	components: {
		noStatus,
		djs,
		state,
		Buttonss
	},
	data() {
		return {
			tabIndex: 1,
			listData: [],
			listIndex: 0,
			leftDistance: '',
			listTxt: '暂无购买记录!',
			list: [
				{
					name: '全部订单',
					typeTxt: '暂无购买记录！'
				},
				{
					name: '待付款',
					typeTxt: '暂无需付款订单~'
				},
				{
					name: '已支付',
					typeTxt: '暂无支付商品~'
				},
				{
					name: '待收货',
					typeTxt: '还未购买商品~'
				},
				{
					name: '待评价',
					typeTxt: '暂无需评价订单~'
				},
				{
					name: '退款/售后',
					typeTxt: '暂无购买记录~'
				}
			],
			page: 1,
			totalPage: 1,
			refundId: 0,
			kdmc: '',
			wlxx: '',
			data: {}, //婚纱操作参数
			type: 0, //1 同意操作 2 拒绝操作  3 同意调换  4 拒绝调换
			reason: '', //拒绝原因
			tiaohuanxinxishuju: {},
			orderType: 2,
			orderData: {}, //取消订单数据
			selectItem: {},
			keyword: '',
			showTime: false, //是否显示时间筛选
			startDate: '',
			endDate: '',
			showv: false,
			tipsContent: '',
			tippsPopupVisiable: false
		};
	},
	onReachBottom() {
		this.page++;
		if (this.page > this.totalPage) return this.$wanlshop.msg('我是有底线的');
		this.getOrderList();
	},
	onLoad(option) {
		const { tabIndex, index } = option;
		this.toggle(tabIndex, index);
	},
	methods: {
		toggle(n, m) {
			this.tabIndex = Number(n) || 1;
			this.page = 1;
			this.listData = [];
			this.listIndex = Number(m) || 0;
			if (this.tabIndex == 1) {
				this.list = [
					{
						name: '全部订单',
						typeTxt: '暂无购买记录！'
					},
					{
						name: '待付款',
						typeTxt: '暂无需付款订单~'
					},
					{
						name: '已支付',
						typeTxt: '暂无支付商品~'
					},
					{
						name: '待收货',
						typeTxt: '还未购买商品~'
					},
					{
						name: '待评价',
						typeTxt: '暂无需评价订单~'
					},
					{
						name: '退款/售后',
						typeTxt: '暂无购买记录~'
					}
				];
			} else {
				this.list = [
					{
						name: '全部订单',
						typeTxt: '暂无购买记录！'
					},
					{
						name: '待付款',
						typeTxt: '暂无需付款订单~'
					},
					{
						name: '已支付',
						typeTxt: '暂无支付商品~'
					},
					{
						name: '待拍摄',
						typeTxt: '暂无拍摄商品~'
					},
					{
						name: '待选样',
						typeTxt: '暂无选样商品~'
					},
					{
						name: '待看板',
						typeTxt: '暂无看板商品~'
					},
					{
						name: '待取件',
						typeTxt: '暂无取件商品~'
					},
					{
						name: '待评价',
						typeTxt: '暂无需评价订单~'
					},
					{
						name: '退款/售后',
						typeTxt: '暂无购买记录~'
					}
				];
			}
			this.listTxt = this.list[this.listIndex].typeTxt;
			this.getOrderList();
		},
		// 筛选订单
		screen() {
			this.page = 1;
			this.showv = false;
			this.listData = [];
			this.getOrderList();
		},
		//重置按钮
		reset() {
			this.startDate = '';
			this.endDate = '';
			this.showv = false;
			this.listData = [];
			this.getOrderList();
		},
		// 查看婚纱
		lookhs(item) {
			this.selectItem = item;
			this.$refs.hsToast.open();
		},
		// 查看订单
		lookOrder(item) {
			this.selectItem = item;
			this.tippsPopupVisiable = true;
			if (this.selectItem.is_prepay == 1) {
				if (this.selectItem.send_type == 2) {
					this.tipsContent =
						'确认订单后，将为您保留活动或商品份额，并请您及时到店领取，同时不能再申请‘退单退款’，在‘确认收货’后，可申请‘退货/售后’；（需您购买的产品支持7天无理由退货）';
				} else {
					this.tipsContent = '确认订单后，将为您保留活动或商品份额，并及时发货，同时不能再申请‘退单退款’，在‘确认收货’后，可申请‘退货/售后’；（需您购买的产品支持7天无理由退货）';
				}
			} else {
				if (this.selectItem.send_type == 2) {
					this.tipsContent =
						'确认订单后，将为您保留活动或商品份额，并请您及时到店领取，同时不能再申请‘退单退款’服务，在‘确认收货’后，可申请‘退货/售后’；（需您购买的产品支持7天无理由退货）';
				} else {
					this.tipsContent =
						'确认订单后，将为您保留活动或商品份额，并及时发货，同时不能再申请‘退单退款’服务，在‘确认收货’后，可申请‘退货/售后’；（需您购买的产品支持7天无理由退货）';
				}
			}
			this.$refs.tips.open();
		},
		// 同意订单
		okOrder(type) {
			let that = this;
			this.$request({
				url: 'wedding/confrim_order',
				method: 'POST',
				data: {
					id: this.selectItem.id,
					status: 1,
					type: 1
				}
			}).then((res) => {
				if (res.data.code == 1) {
					if (type) {
						that.$refs.tips.close();
					} else {
						that.$refs.orderToast.close();
					}
					if (that.listIndex > 0) {
						that.listIndex += 1;
					}
					that.$wanlshop.msg('操作成功!');
					that.getOrderList();
				}
			});
		},
		// 拒绝订单
		refuseOrder() {
			this.type = 99;
			this.$refs.orderToast.close();
			this.$refs.tips.close();
			this.$refs.reason.open();
		},
		// 婚纱拒绝
		refuseHs() {
			this.type = 98;
			this.$refs.hsToast.close();
			this.$refs.reason.open();
		},
		// 同意婚纱
		okHs() {},
		//查看调换信息
		seetiaohuan(item) {
			this.tiaohuanxinxishuju = item;
			this.$refs['tiaohuanxinxi'].open();
		},
		guanbitiaohuanxinxi() {
			this.$refs['tiaohuanxinxi'].close();
		},
		//拒绝同意调换
		tiaohuan() {
			this.$request({
				url: 'wedding/change_sure',
				method: 'POST',
				data: this.data
			}).then((res) => {
				if (this.type == 3) {
					this.$refs['confirm'].close();
				} else {
					this.$refs['reason'].close();
					this.reason = '';
				}
				this.refresh();
				this.$wanlshop.msg('操作成功!');
			});
		},
		//婚纱订单详情
		goDetails(item) {
			item.is_mange = 0;
			uni.navigateTo({
				url: '/pages/schedule/weddingDressOrderDetails?orderInfo=' + encodeURIComponent(JSON.stringify(item))
			});
		},
		reGoDetails(item) {
			uni.redirectTo({
				url: '/pages/filePages/goodsDetail/goodsDetail?id=' + item.goods_id + '&type=1'
			});
		},
		//商家婚纱订单操纵
		handle(type, item = null) {
			this.type = type;
			if (item) this.selectItem = item;
			console.log(type, this.selectItem);
			this.data = {
				id: this.selectItem.id ? this.selectItem.wedding.id : item.wedding.id,
				user_id: uni.getStorageSync('userInfo').id,
				u_type: type == 2 ? 0 : 1,
				iden: 1
			};
			if (type == 1) {
				this.$refs.hsToast.close();
				this.$refs['confirm'].open();
			}else if (type == 2) {
				this.$refs.hsToast.close();
				this.$refs['reason'].open();
			}else if (type == 3) {
				this.data = {
					id: item.change.id,
					status: 1
				};
				this.$refs['confirm'].open();
			}else if (type == 4) {
				this.data = {
					id: item.change.id,
					status: 2
				};
				this.$refs['reason'].open();
			}
		},
		// 更新订单状态
		confirmHandle() {
			let that = this;
			if (this.type == 99) {
				this.$request({
					url: 'wedding/confrim_order',
					method: 'POST',
					data: {
						id: this.selectItem.id,
						status: 0,
						type: 1,
						u_content: this.reason
					}
				}).then((res) => {
					if (res.data.code == 1) {
						that.$refs.orderToast.close();
						that.$refs.reason.close();
						that.$wanlshop.msg('操作成功!');
						if (that.listIndex > 0) {
							that.listIndex += 1;
						}
						that.getOrderList();
					}
				});
				return;
			}
			if (this.type >= 3 && this.type < 99) {
				this.data.content = this.reason;
				this.tiaohuan();
				return;
			}
			this.data.u_content = this.reason;
			if (this.type == 1 || this.type == 2) {
				this.$request({
					url: 'wedding/appointment_status_update',
					method: 'POST',
					data: {
						...this.data
					}
				}).then((res) => {
					if(res.data.code == 1){
						if (this.type == 1) {
							this.$refs['confirm'].close();
						} else {
							this.$refs['reason'].close();
							this.reason = '';
						}
						if (that.listIndex > 0) {
							that.listIndex += 1;
						}
						this.getOrderList();
						this.$wanlshop.msg('操作成功!');
					}
				});
			} else {
				this.$request({
					url: 'wedding/confrim_order',
					method: 'POST',
					data: {
						id: this.selectItem.id,
						status: 2,
						type: 1,
						u_content: this.reason
					}
				}).then((res) => {
					if(res.data.code == 1){
						if (this.type == 1) {
							this.$refs['confirm'].close();
						} else {
							this.$refs['reason'].close();
							this.reason = '';
						}
						if (that.listIndex > 0) {
							that.listIndex += 1;
						}
						this.getOrderList();
						this.$wanlshop.msg('操作成功!');
					}
				});
			}
		},
		cencle() {
			this.selectItem = item;
			this.$refs['confirm'].close();
			this.$refs['revoke'].close();
			this.$refs['end'].close();
		},
		//申请退款, 功能未开发完
		shenqingtuikuan(item) {
			this.selectItem = item;
		},

		//搜索订单
		search() {
			this.page = 1;
			this.listData = [];
			this.getOrderList();
		},
		//刷新列表
		refresh(data = null) {
			if (data) this.selectItem = data;
			if (data?.is_cancel) {
				// this.listIndex = 0;
			} else {
				if (this.listIndex) {
					this.listIndex += 1;
				}
			}
			this.getOrderList();
		},
		//收商家自收款
		shoushangjiazishoukuan(item) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '是否收到非平台上支付的货款?',
				success: (res) => {
					uni.showLoading({
						title: ''
					});
					if (res.confirm) {
						this.$request({
							url: 'manage/refund_second_sure',
							method: 'POST',
							data: {
								id: item.refund.id
							}
						}).then((res) => {
							if (res.data.code == 1) {
								this.$wanlshop.msg('操作成功！');
								that.page = 1;
								that.getOrderList();
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
					} else if (res.cancel) {
						uni.hideLoading();
					}
				}
			});
		},
		//确认退货
		querentuihuo(item) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确认取消订单!',
				success: (res) => {
					uni.showLoading({
						title: '已取消'
					});
					if (res.confirm) {
						this.$request({
							url: 'refund/toExpress',
							method: 'POST',
							data: {
								id: item.refund.id,
								express_name: '',
								express_no: ''
							}
						}).then((res) => {
							if (res.data.code == 1) {
								this.$wanlshop.msg('操作成功！');
								that.page = 1;
								that.getOrderList();
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
					} else if (res.cancel) {
						uni.hideLoading();
					}
				}
			});
		},
		// 倒计时结束
		delOrder(index) {
			this.page == 1;
			this.getOrderList();
		},
		// 确认退货
		submitWl() {
			if (this.kdmc == '') {
				this.$wanlshop.msg('请填写快递名称');
			} else if (this.wlxx == '') {
				this.$wanlshop.msg('请填写物流信息');
			} else {
				this.$request({
					url: 'refund/toExpress',
					method: 'POST',
					data: {
						id: this.refundId,
						express_name: this.kdmc,
						express_no: this.wlxx
					}
				}).then((res) => {
					if (res.data.code == 1) {
						this.$wanlshop.msg('提交成功');
						this.$refs.popup.close();
					}
				});
			}
		},
		handleCloseBlock() {
			this.$refs.reason.close();
		},
		logistics(id) {
			this.refundId = id;
			this.$refs.popup.open('bottom');
		},
		shohou(id) {
			uni.navigateTo({
				url: '/pages/filePages/salesType/salesType?id=' + id
			});
		},
		goAdd(item) {
			let type = 0;
			if (item.order_type == 'goods') {
				type = 0;
			} else {
				type = 1;
			}
			uni.navigateTo({
				url: '/pages/filePages/goodsDetail/goodsDetail?id=' + item.goods[0].goods_id + '&type=' + type
			});
		},
		goComment(item) {
			uni.navigateTo({
				url: '/pages/filePages/comment/comment?id=' + item.id
			});
		},
		// 选择开始日期
		change(e) {
			this.startDate = e;
		},
		// 选择结束日期
		change1(e) {
			this.endDate = e;
		},
		// 获取订单列表
		getOrderList() {
			let that = this;
			const selectItem = this.selectItem;
			uni.showLoading({
				title: '加载中'
			});
			this.$request({
				url: 'order/getOrderList',
				data: {
					state: that.listIndex,
					goods_type: that.tabIndex == 1 ? 'goods' : 'package',
					page: that.page,
					keyword: that.keyword,
					start: that.startDate,
					end: that.endDate
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					that.totalPage = data.last_page;
					if (that.listIndex == 0) {
						if (selectItem?.id) {
							let list = JSON.parse(JSON.stringify(that.listData));
							const filterItem = data.data.filter((item) => item.id == selectItem.id)[0];
							const index = list.findIndex((item) => item.id == selectItem.id);
							console.log(index, selectItem, filterItem);
							list.splice(index, 1, filterItem);
							that.listData = list;
							that.selectItem = {};
						} else {
							that.listData = [...that.listData, ...data.data];
						}
					} else {
						that.listData = data.data;
					}
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
				uni.hideLoading();
			});
		},
		rTitle(title, skuText) {
			let text = title;
			let regex = new RegExp('####', 'g');
			text = text.replace(regex, skuText);
			return text;
		},
		// 婚纱套系去支付传id
		payment(data) {
			if (data.can_pay != 1) {
				return uni.showToast({
					title: '当前订单暂不能支付',
					icon: 'none',
					duration: 2000
				});
			} else {
				if (data.pay_action != 1) {
					return uni.showToast({
						title: data.remarks,
						icon: 'none',
						duration: 2000
					});
				}
			}
			let that = this;
			this.selectItem = data;
			uni.showLoading({
				title: '支付中'
			});
			uni.login({
				provider: 'weixin',
				success: function (res) {
					that.paymentOption(data, res.code);
				}
			});
		},
		// 支付操作接口请求
		paymentOption(data, code) {
			const that = this;
			this.$request({
				url: 'pay/payment',
				method: 'POST',
				data: {
					order_id: data.id,
					order_type: data.order_type,
					type: 'wechat',
					method: 'miniapp',
					code
				}
			}).then((res) => {
				if (res.data.code == 1) {
					that
						.$wx_pay(res.data.data)
						.then((res) => {
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 2000
							});
							that.selectItem = data;
							that.refresh(that.selectItem);
						})
						.catch((err) => {
							uni.showToast({
								title: '取消支付',
								icon: 'none',
								duration: 2000
							});
						});
				} else {
					uni.showToast({
						title: res.data.msg
					});
				}
				uni.hideLoading();
			});
		},
		// 取消订单提示
		cancel(item) {
			this.orderData = item;
			this.$refs.cancelOrder.open();
		},
		// 取消订单操作
		cancelOrder(type) {
			let that = this;
			let item = this.orderData;

			uni.showLoading({
				title: '取消中'
			});
			// 支付前
			this.$request({
				url: 'order/cancelOrder',
				method: 'POST',
				data: {
					id: item.id
				}
			}).then((res) => {
				uni.hideLoading();
				if (res.data.code == 1) {
					that.page = 1;
					item.is_cancel = true;
					that.refresh(item);
					uni.showToast({
						title: '取消成功',
						icon: 'none',
						duration: 2000
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
				}
				that.orderData = {};
				that.confirmType = 0;
				that.popupContent = '';
				that.$refs.cancelOrder.close();
				uni.hideLoading();
			});
		},
		// 确认收货传id
		confirm(id) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确认收到货了吗?',
				success: function (res) {
					if (res.confirm) {
						that
							.$request({
								url: 'order/confirmOrder',
								method: 'POST',
								data: {
									id: id
								}
							})
							.then((res) => {
								if (res.statusCode == 200) {
									that.$wanlshop.msg('收货成功');
									that.page = 1;
									that.getOrderList();
								}
							});
					} else if (res.cancel) {
					}
				}
			});
		},
		// 售后确认收货
		confirm2(item) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确认收到货了吗?',
				success: function (res) {
					if (res.confirm) {
						that
							.$request({
								url: 'refund/refund_sure',
								method: 'POST',
								data: {
									id: item.refund.id
								}
							})
							.then((res) => {
								if (res.statusCode == 200) {
									that.$wanlshop.msg('收货成功');
									that.page = 1;
									that.getOrderList();
								}
							});
					} else if (res.cancel) {
					}
				}
			});
		},
		// 跳转订单详情
		onOrderDetail(item) {
			let data = {
				id: item.id,
				refundstatus: item.refundstatus,
				refund: item.refund,
				is_prepay: item.is_prepay,
				wedding: item.wedding
			};
			uni.navigateTo({
				url: `/pages/filePages/storeDetails/storeDetails?data=${JSON.stringify(data)}&state=0`
			});
		},
		// 切换订单状态
		onActive(ind, txt) {
			this.listIndex = ind;
			this.listTxt = txt;
			this.listData = [];
			this.page = 1;
			this.getOrderList();
		},
		//筛选点击展开和收起
		expandAndCollapse() {
			this.showv = !this.showv;
		}
	}
};
</script>

<style scoped lang="scss">
.order_management {
	padding-bottom: 50upx;
	.tab {
		display: flex;
		justify-content: space-between;
		align-self: center;
		background-color: #fff;
		padding-bottom: 8rpx;
		.tabitem {
			width: 50%;
			height: 90rpx;
			line-height: 88rpx;
			border-bottom: 2rpx solid;
			border-color: #f4f5f9;
			color: #666;
			text-align: center;
		}
		.active {
			color: #333;
			border-color: #333;
			font-weight: bold;
		}
	}
	.tab_nav {
		background-color: #ffffff;
	}

	.header_share {
		height: 94upx;
		background: #ffffff;
		overflow: hidden;
		.search-warp {
			position: relative;
			z-index: 1;
			padding: 12rpx 32rpx;
		}
		.uni_ipt {
			width: 460upx;
			height: 68upx;
			background: #f3f3f3;
			border-radius: 34upx;
			padding-left: 78upx;
		}

		.search_img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			left: 50rpx;
			top: 28rpx;
		}

		.search_btn {
			position: absolute;
			right: 32rpx;
			top: 12rpx;
			width: 116upx;
			height: 68upx;
			background: #e0a76d;
			border-radius: 34upx;
			line-height: 68upx;
			color: #fff;
			z-index: 23;
		}
		.filter {
			display: flex;
			justify-content: center;
			align-items: center;
			.rqsxicon {
				width: 24rpx;
				height: 24rpx;
			}
			.arrow {
				width: 24rpx;
				height: 24rpx;
				transition: all 300ms;
			}
			.showv {
				transform: rotate(180deg);
			}
			.title {
				padding: 0 8rpx;
				font-size: 26rpx;
			}
		}
	}

	.head_riqi_box {
		height: 94upx;
		background: #ffffff;

		/deep/ .uni-date {
			width: 290upx;
			height: 50upx;
			background: #f3f3f3;
			border-radius: 58upx 58upx 58upx 58upx;
		}

		/deep/ .uni-date-x--border {
			border: none !important;
		}

		/deep/ .uni-date-x {
			margin-top: 6upx;
		}

		.zhi_txt {
			color: #999999;
			line-height: 94upx;
		}

		.shaixuan_btn {
			width: 104upx;
			height: 50upx;
			background: #666666;
			border-radius: 25upx 25upx 25upx 25upx;
			line-height: 50upx;
			color: #ffffff;
			margin-top: 18upx;
			margin-left: 6upx;
		}
	}
}
.filter-box {
	position: absolute;
	left: 0;
	top: 194rpx;
	width: 100%;
	height: calc(100vh - 194rpx);
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 200;
	.filter-container {
		width: 100%;
		background-color: #fff;
	}
	.fillter-warp {
		padding: 32rpx;
		.title {
			height: 32rpx;
			padding-bottom: 30rpx;
			font-size: 26rpx;
		}
		.date_box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.divider {
				width: 64rpx;
				height: 2rpx;
				margin: 0 28rpx;
				background-color: #666;
			}
		}
	}
	.btn-group {
		display: flex;
		.btn {
			width: 50%;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
		}
		.reset {
			background-color: rgba(235, 190, 135, 0.3);
			color: #d09f65;
		}
		.confirm {
			background: linear-gradient(to right, #e4b77f 0%, #cd9c61 100%);
			color: #fff;
		}
	}
}
.list_box {
	width: 718upx;
	height: 50upx;
	margin-bottom: 20rpx;
	padding: 24upx 16upx;
	background-color: #fff;
	position: sticky;
	top: 0;

	.scroll-view_H {
		white-space: nowrap;

		.listTxt {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #666666;
			display: inline-block;
			margin-right: 46rpx;
		}

		.listTxtActive {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333;
			display: inline-block;
			margin-right: 46rpx;
		}
	}
}

.b {
	min-width: 156rpx;
	padding: 14rpx 30rpx;
	border-radius: 30rpx;
	border: 1rpx solid #cccccc;
	font-size: 22rpx;
	color: #333333;
	margin-left: 12rpx;
	box-sizing: border-box;
	text-align: center;
}

.r {
	min-width: 156rpx;
	padding: 14rpx 30rpx;
	border-radius: 30rpx;
	border: 1rpx solid #ff3f4a;
	font-size: 22rpx;
	color: #ff3f4a;
	margin-left: 12rpx;
	box-sizing: border-box;
	text-align: center;
}
.disabled {
	color: rgba(0, 0, 0, 0.2);
	border-color: rgba(0, 0, 0, 0.2);
}

.completeAfter {
	font-size: 26rpx;
	color: #ff3f4a;
}

.completeBefore {
	font-size: 26rpx;
	color: #666;
}

.orderInformation {
	overflow: hidden;

	.popup_box {
		background: #f4f5f9;
		border-radius: 32rpx;
		padding: 32rpx;

		.title_txt {
			padding-top: 12rpx;
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			line-height: 50rpx;
		}

		.submit_btn {
			width: 600upx;
			height: 80upx;
			background: #ebbe87;
			border-radius: 50upx;
			line-height: 80upx;
			color: #ffffff;
			margin: 0 auto;
			margin-top: 120upx;
		}

		.ipt_box {
			width: 622upx;
			height: 80upx;
			background: #ffffff;
			border-radius: 8upx;
			margin: 50upx auto;
			margin-bottom: 0;
			padding: 18upx 0 20upx 24upx;
			box-sizing: border-box;

			.left_txt_title {
				color: #666666;
			}

			.ipt_wuliu_box {
				height: 42upx;
				color: #333333;
				margin-left: 32upx;
			}
		}
	}

	.goods_list_box2 {
		.head_right {
			width: 246upx;
			height: 32upx;
			background: rgba(255, 63, 74, 0.28);
			border-radius: 16upx 0upx 16upx 16upx;

			.c_left_box {
				width: 104upx;
				height: 32upx;
				background: #ff3f4a;
				border-radius: 16upx 0upx 16upx 16upx;
				color: #ffffff;
				line-height: 32upx;
			}

			.c_right_box {
				width: 128upx;
				color: #ff3f4a;
				line-height: 32upx;
				margin-left: 6upx;
			}
		}
	}

	.goods_list_box {
		width: 100%;
		background: #fff;
		padding: 28rpx 32rpx 24rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		font-family: PingFangSC, PingFang SC;
		.goods_list_head {
			display: flex;
			align-items: center;
			.head_left {
				display: flex;
				align-items: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: bold;
				flex: 1;
				width: calc(100% - 356rpx);
				padding-right: 40rpx;
				color: #333;
				box-sizing: border-box;
				.shopIcon {
					width: 55rpx;
					height: 55rpx;
					background: #ebbe87;
					border-radius: 50%;
				}
				.shopname {
					width: calc(100% - 48rpx);
					padding-left: 12rpx;
					line-height: 48rpx;
					font-size: 28rpx;
					font-weight: 500;
					box-sizing: border-box;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.c_left_box {
				width: 356rpx;
				color: #999;
				white-space: nowrap;
			}
			.head_right_status {
				color: #ff3f4a;
			}

			.head_right {
				width: 246upx;
				height: 32upx;
				background: rgba(255, 63, 74, 0.28);
				border-radius: 16upx 0upx 16upx 16upx;

				.c_left_box {
					width: 104upx;
					height: 32upx;
					background: #ff3f4a;
					border-radius: 16upx 0upx 16upx 16upx;
					color: #ffffff;
					line-height: 32upx;
				}

				.c_right_box {
					width: 128upx;
					color: #ff3f4a;
					line-height: 32upx;
					margin-left: 6upx;
				}
			}
		}

		.goods_detail_box {
			display: flex;
			align-items: center;
			.goods_img_box {
				width: 116upx;
				height: 116upx;
				border-radius: 8upx;
				overflow: hidden;
			}

			.goods_name_box {
				width: 356rpx;
				height: 90rpx;
				color: #333333;
				letter-spacing: 0;
				overflow: hidden;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				margin-left: 26rpx;
				line-height: 46rpx;
			}

			.goods_price_box {
				margin-top: 18upx;
				margin-left: 94upx;
				text-align: right;
				.price_txt {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #333;
					white-space: nowrap;
					text-align: right;
				}
				.num_txt {
					margin-top: 10rpx;
					color: #666666;
					text-align: right;
				}
			}
		}

		.bottom_btn {
			margin-top: 24upx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.cancel_btn {
				width: 157upx;
				height: 58upx;
				border-radius: 30upx;
				border: 1upx solid #cccccc;
				color: #333333;
				line-height: 58upx;
				margin-left: 16upx;
			}

			.payment_btn {
				width: 157upx;
				height: 58upx;
				border-radius: 30upx;
				border: 1upx solid #ff3f4a;
				color: #ff3f4a;
				line-height: 58upx;
				margin-left: 16upx;
			}

			.receiving_btn {
				width: 157upx;
				height: 58upx;
				border-radius: 30upx;
				background: #ff3f4a;
				color: #ffffff;
				line-height: 58upx;
				margin-left: 16upx;
			}
		}
		.look {
			font-size: 24rpx;
			color: #fff;
			background: #844902;
			border-radius: 25rpx;
			height: 50rpx;
			width: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 24rpx;
		}
		.refuse {
			font-size: 24rpx;
			color: #844902;
			height: 50rpx;
			width: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 25rpx;
			border: 2rpx solid #844902;
		}
	}
}
.rejectBtnBlock {
	width: 100%;
	display: flex;
	justify-content: center;
	padding-top: 84rpx;
	button {
		font-size: 28rpx;
		background: #ebbe87;
		width: 100%;
		height: 86rpx;
		border-radius: 43px;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.tips {
	width: 80%;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 20rpx;
	.title {
		padding-top: 60rpx;
		height: 82rpx;
		line-height: 56rpx;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}
	.content {
		padding: 26rpx 60rpx 60rpx;
		line-height: 48rpx;
		font-size: 32rpx;
		text-align: center;
		color: #666;
	}
	.btn-group {
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1px solid #f5f5f5;
	}
	.btn {
		flex: 1;
		height: 110rpx;
		line-height: 110rpx;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}
	.cancenl {
		color: #333;
	}
	.confirm {
		border-left: 1px solid #f5f5f5;
		color: #576b95;
	}
}
.tips2 {
	width: 600rpx;
	padding: 32rpx;
	background: #fff;
	border-radius: 32rpx;
	box-sizing: border-box;
	.title {
		padding-top: 12rpx;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		line-height: 50rpx;
	}
	.content {
		padding-top: 32rpx;
		text-align: center;
		font-size: 30rpx;
		color: #666;
		line-height: 42rpx;
	}
	.btn-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 66rpx;
	}
	.btn {
		width: 260rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.cancel {
		background: #f3f3f3;
		color: #333;
	}
	.confirm {
		background: #ebbe87;
		color: #fff;
	}
}
.opkijs {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #333;
}
.jjpopup {
	padding: 32rpx;
	background: linear-gradient(to bottom, #ebbe8761, #fff), #fff;
	border-radius: 32rpx 32rpx 0px 0px;
}
</style>
<style>
page {
	background-color: #f4f5f9;
}
</style>
